<template>
  <div>
    <el-table :data="tableDat">
      <el-table-column prop="name" label="用户名" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button @click="ShowInfo(scope.row)">查看信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="Info" title="查看信息" :before-close="close">
      <el-table
          :data="tableData">
        <el-table-column
            prop="name"
            label="用户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="account"
            label="账号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="defaultTraderPlace"
            label="默认地址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="tele"
            label="电话"
            width="180">
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="Order" title="查看历史订单" :before-close="close">
      <el-table
          :data="orderData">
        <el-table-column
            prop="id"
            label="订单序号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="buyTime"
            label="下单时间"
            width="180">
        </el-table-column>
        <el-table-column>
        <template v-slot="scope">
          {{judge(scope.row.result)}}
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="ShowOrderInfo(scope.row)">查看</el-button>
            <el-button v-if="status" @click="CancelGoods(scope.row)">取消订单</el-button>
            <el-button v-if="status" @click="CompleteGoods(scope.row)">完成订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="orderInfo" title="历史订单信息查看" :before-close="close1" class="dialog1">
      <template #footer>
        <div class="div3">
          <p>订单序号:{{all.id}}</p>
          <p>下单时间:{{all.trade_time}}</p>
          <p>商品名:{{all.goods}}</p>
          <p>单价:{{all.price}}</p>
        </div>

        <div class="div2">
          <p>购买人:{{all.buyer}}</p>
          <p>手机号:{{ all.tele}}</p>
          <p>收货地址:{{ all.trade_place}}</p>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "showUsers",
  data(){
    return{
      status:false,
      Info:false,
      Order:false,
      orderInfo:false,
      tableDat:[],
      tableData:[],
      orderData:[],
      Dat:[],
      all:{
        id:'',
        trade_time:'',
        trade_place:'',
        buyer:'',
        goods:'',
        price:'',
        tele:'',
      }
    }
  },
  created() {
    this.getUser();
  },
  methods:{
    judge(state){
      if(state==0){
        this.status=false;
        return "已取消";
      }
      else if(state==1){
        this.status=false;
        return "已完成";
      }
      else {
        this.status=true;
        return "交易中";
      }
    },
    CompleteGoods(row){
      request.get("http://localhost:8081/seller/completeGoods?id="+row.id)
      if (res.flag) {
        this.tableDat = res.data;
        this.$message({
          type: 'success',
          message: res.msg
        })
      } else {
        this.$message.error(res.msg);
      }
      location.reload()
    },
    CancelGoods(row){
      request.get("http://localhost:8081/seller/CancelTrad?id="+row.id+"&goodsid="+row.goodsId)
      if (res.flag) {
        this.tableDat = res.data;
        this.$message({
          type: 'success',
          message: res.msg
        })
      } else {
        this.$message.error(res.msg);
      }
      location.reload()
    },
    getUser(){
      request.get("http://localhost:8081/seller/checkUser2").then(res => {
        if (res.flag) {
          this.tableDat = res.data;
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    ShowInfo(row){
      this.Info=true;
      this.id=row.id
      request.get("http://localhost:8081/seller/checkUserbyid?id="+this.id).then(res => {
        if (res.flag) {
          this.tableData = res.data;
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    ShowOrder(row){
      this.Order=true;
      this.id=row.id
      request.get("http://localhost:8081/seller/seeUsertradition?user_id="+ this.id).then(res => {
        if (res.flag) {
          this.orderData= res.data;

          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    ShowOrderInfo(row){
      this.orderInfo=true;
      this.id=row.id
      request.get("http://localhost:8081/seller/seeTraditionbyid?id="+ this.id).then(res => {
        if (res.flag) {
          this.all= res.data;
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })

    },
  }
}
</script>

<style scoped>
</style>
